<template>
    <Page class="basic company">
        <template #header>
            <span style="color:#909399;size:14px">注：积分规则适用于物业公司旗下所有项目</span>
            <!-- <el-input v-model="queryForm.ruleName" placeholder="请输入规则名称"/>
            <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查 询</el-button>
            <el-button class="ed-button ed_white_bottom" @click="reset()"><svg-icon icon-class="reset-svg"/>重 置</el-button> -->
        </template>
        <PageCard title="积分规则列表">
            <template #actions>
                <!-- <el-button class="ed-button ed_black-bottom ed-button36" v-has="'integral:rule:add'" @click="add()"><svg-icon icon-class="add-svg"/>新增规则</el-button> -->
            </template>
            <ApiTable :api="load" ref="table" :params="queryForm">
                <el-table-column type="index" width="80" label="序号"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="ruleName" label="规则名称"/>
                <el-table-column :show-overflow-tooltip="true" prop="money,ponit"  label="生成规则">
                    <template slot-scope="scope">
                        {{ scope.row.point ?  scope.row.money +'元=' + scope.row.point+'积分'  : ''}}
                        <!-- {{scope.row.money}}元={{scope.row.point}}积分 -->
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="ruleStatus" label="启用/停用">
                    <template slot-scope="scope">
                        {{scope.row.ruleStatus==1? '启用' : '停用'}}
                        <el-switch
                            :value="scope.row.ruleStatus == 1 ? true : false"
                            @change="switchChange(scope.row, scope.row.ruleStatus == 1 ? 0 : 1)"
                            active-color="#EED096"
                            inactive-color="#909399">
                        </el-switch>
                    </template>
                </el-table-column>
                <!-- <el-table-column :show-overflow-tooltip="true" prop="opposite" label="兑换比例"/>
                <el-table-column :show-overflow-tooltip="true" prop="effective" label="有效期"/>
                <el-table-column :show-overflow-tooltip="true" prop="maxPointDay" label="单用户日最大领取数"/> -->
                <el-table-column :show-overflow-tooltip="true" prop="" label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button class="ed-table-bottom ed_blue_border" v-has="'integral:rule:configure'" @click="configIntegral(scope.row)">配置</el-button>
                        <!-- <el-button class="ed-table-bottom ed_black_border" v-has="'integral:rule:update'" @click="updateRow(scope.row)">编辑</el-button>
                        <el-button class="ed-table-bottom ed_delete_border" v-has="'integral:rule:delete'" @click="del(scope.row)">删除</el-button> -->
                    </template>
                </el-table-column>
            </ApiTable>

            <EdDialog ref="dialogRef"  v-if="showRule"  title="物业费用积分规则" @close-dialog="closeDialog" @save-dialog="saveDialog">
               <div style="text-align: center">
                    <span>1元=</span>&nbsp;&nbsp;
                    <el-input v-model="point" style="width:300px" maxlength="5" >
                        <i slot="suffix" style="font-style:normal;margin-right: 10px;display: flex;align-items: center;">积分</i>
                    </el-input>
                    <div v-show="/^[1-9]\d*$/.test(point)&&point.length<6 ? false : true" style="color: #F56C6C;margin-top: 5px;transform: translateX(-60px);">请输入1-99999的整数</div>
                    <!-- <div v-show="point.length<6" style="color: #F56C6C;margin-top: 5px;transform: translateX(-60px);">请输入1-99999的整数</div> -->
                    <!-- <span>积分</span> -->
               </div>
            </EdDialog>
        </PageCard>
        <!-- <ed-confirm-delete ref="confirmDeleteRef" @confirmDeleteTrue="confirmDeleteTrue"></ed-confirm-delete> -->
    </Page>
</template>

<script>
    import Page from '../../components/Page.vue'
    import PageCard from 'src/views/components/PageCard.vue'
    import ApiTable from 'src/components/ApiTable.vue'
    import EdTable from "src/components/EdTable.vue";
    import EdConfirmDelete from "src/components/EdConfirmDelete.vue";
    import EdDialog from 'src/components/EdDialog.vue'
    // import {delRule ,queryList ,villageDel} from "src/api/activity";
    import {ruleList,integralShow,integralHide,configUpdate,showPoint} from "./api";
    import { defineComponent } from 'vue'
    export default defineComponent({
        name: "IntegralRule",
        components:{EdTable,EdConfirmDelete,Page, PageCard, ApiTable,EdDialog},
        data(){
            return{
                queryForm:{},
                confirmRow:{},
                showRule:false,
                point:'',
                id:''
            }
        },
        mounted(){
            this.$nextTick(()=>{
                this.$refs.table.load(1)
            })
        },
        methods:{
            load:ruleList,
            search(){
                this.$refs.table.load(1)
            },
            reset(){
                // this.queryForm.ruleName = "";
                this.$nextTick(()=>{
                    this.$refs.table.load(1,10)
                })
            },
            configIntegral(row){
                this.showRule=true
                this.id=row.id
                showPoint({id:this.id}).then(response => {
                    if(response.success) {
                        this.point = response.data.point.toString()
                    }
                })
            },
            saveDialog(){
                if(/^[1-9]\d*$/.test(this.point)){
                    configUpdate({id:this.id,point:this.point}).then(response => {
                        if(response.success) {
                            this.$message.success({
                                message: '积分规则配置成功！',
                                duration: 2000,
                                center:true
                            });
                        }
                        this.$refs.table.load()
                        this.showRule = false
                        this.$refs.dialogRef.loading  = false
                    }).catch( response => {
                        this.$refs.dialogRef.loading  = false
                    })
                }else {
                    // 校验不能输入0,输入超过6位数自动就不能输入了
                    this.$message.warning('请输入1-99999的正整数')
                    this.$refs.dialogRef.loading  = false
                }
         
            },
            closeDialog(){
                this.showRule = false
            },
            switchChange(row){
                if(row.ruleStatus===0){
                    integralShow({id:row.id}).then(response => {
                        if(response.success) {
                            this.$message.success({
                                message:'已切换为启用',
                                duration: 2000,
                                center:true
                            });
                            this.$refs.table.load(1)
                        }
                    })
                } else {
                    integralHide({id:row.id}).then(response => {
                        if(response.success) {
                            this.$message.success({
                                message:'已切换为停用',
                                duration: 2000,
                                center:true
                            });
                            this.$refs.table.load(1)
                        }
                    })
                }
            }
            // add(){
            //     this.$router.push({
            //         path: '/integral/rule-create'
            //     })
            // },
            // del(row) {
            //     this.confirmRow = row;
            //     this.$refs.confirmDeleteRef.open("删除确认","确认删除此项数据？","warning")
            // },
            // confirmDeleteTrue(){
            //     delRule(this.confirmRow.id).then(response => {
            //         if(response.code == 20000) {
            //             this.$message.success({
            //                 message: '积分规则已删除成功！',
            //                 duration: 2000,
            //                 center:true
            //             });
            //             this.$refs.table.load(1,10)
            //         }
            //     })
            // },
        }
    })
</script>

<style scoped lang="scss">
    :deep .el-input__suffix{
        display: flex;
        align-items: center;
    }
</style>